<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-transfer v-model="value" :data="data"></el-transfer>
            </my-simple-tr>

            <my-simple-tr label="搜索">
                <el-transfer :filterable="true" @filter-method="filterMethod" v-model="value"
                             :data="data"></el-transfer>
            </my-simple-tr>

            <my-simple-tr label="props 属性为它们设置别名">
                <el-transfer :filterable="true" @filter-method="filterMethod" v-model="value"
                             :props="{
                              key: 'value',
                              label: 'desc'
                            }"
                             :data="otherDate"></el-transfer>
            </my-simple-tr>

            <my-simple-tr label="可自定义">
                <el-transfer :filterable="true" :titles="['原始','现在']"
                             :format="{noChecked: '${total}',hasChecked: '${checked}/${total}' }"
                             :button-texts="['删除','新增']" @filter-method="filterMethod" v-model="value"
                             :left-default-checked="[0,1,2,3]"
                             :right-default-checked="[0,1,2,3]"
                             @change="handleChange"
                             :render-content="renderFunc"
                             :data="data"></el-transfer>
            </my-simple-tr>

        </my-simple-table>
    </div>
</template>

<style>
</style>

<script>
    export default {
        data() {
            const generateDate = _ => {
                const data = [];
                const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
                const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
                cities.forEach((city, index) => {
                    data.push({
                        label: city,
                        key: index,
                        pinyin: pinyin[index]
                    });
                });
                return data;
            };

            const otherDate = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        value: i,
                        desc: `备选项 ${ i }`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            return {
                data: generateDate(),
                otherDate: otherDate(),
                value: [1],
                renderFunc(h, option) {
                    return < span > {option.key} - {option.label} < /span>
                }
            };
        },
        methods: {
            filterMethod(query, item) {
                return item.pinyin.indexOf(query) > -1;
            },
            handleChange(value, direction, movedKeys) {
                console.log(value, direction, movedKeys);
            }

        }
    }
</script>

